<template>
  <div class="title-box"
       :style="[
            {'backgroundColor':bgc},
            {'backgroundImage':'url('+bgImage+')','backgroundSize': bgSize},
            {'width':'100%'},
            {'height':'100%'}
         ]">
    <div class="animate"
         :style="[{'color':title_bgc},{'fontSize':fontSize+'px'}]">
      {{titleTxt}}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'activity_i_award',
  cname: '中奖滚动',
  icon: 'iconbiaoti',
  configName: 'c_home_title',
  type: 1, // 0 基础组件 1 活动组件
  defaultName: 'activityAward', // 外面匹配名称
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  position: {
    top: 0,
    left: 0,
    width: 104,
    height: 53,
    zindex: 1,
  },
  computed: {
    ...mapState('admin/mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler (nVal, oVal) {
        this.setConfig(nVal)
      },
      deep: true
    },
    num: {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
      },
      deep: true
    },
    'defaultArray': {
      handler (nVal, oVal) {
        let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
        this.setConfig(data);
      },
      deep: true
    }
  },
  data () {
    return {
      defaultConfig: {
        name: 'activityAward',
        timestamp: this.num,
        titleConfig: {
          title: '默认文字',
          value: '',
          placeholder:'为空则根据抽奖数据动态展示'
        },
        position: {
          top: 0,
          left: 0,
          width: 104,
          height: 53,
          zindex: 1,
        },
        titleColor: {
          title: '文本颜色',
          default: [
            {
              item: 'rgba(51,51,51,1)'
            }
          ],
          color: [
            {
              item: 'rgba(51,51,51,1)'
            }
          ]
        },
        bgColor: {
          title: '背景颜色',
          default: [
            {
              item: 'rgba(255,255,255,1)'
            }
          ],
          color: [
            {
              item: 'rgba(255,255,255,1)'
            }
          ]
        },

        fontSize: {
          title: '文本大小',
          val: 12,
          min: 12
        },
        layoutConfig: {
          widthTitle: '宽度',
          width: 104,
          heightTitle: '高度',
          height: 53,
          topTitle: '居上',
          top: 0,
          leftTitle: '居左',
          left: 0,
        },
        logoConfig: {
          title: '背景图片',
          url: ''
        }
      },
      bgSize: '',
      bgImage: '',
      titleTxt: '',
      fontSize: 0,
      bgc: 'rgba(51,51,51,0)',
      title_bgc: 'rgba(51,51,51,1)',
      pageData: {}
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
      this.setConfig(this.pageData)
    })
  },
  methods: {
    setConfig (data) {
      console.log('data', JSON.stringify(data))
      this.titleTxt = data.titleConfig.value
      this.fontSize = data.fontSize.val
      this.bgc = data.bgColor.color[0].item
      this.title_bgc = data.titleColor.color[0].item
      this.bgImage = data.logoConfig.url
      this.bgSize = '100% 100%'
    }
  }
}
</script>

<style scoped lang="stylus">
.title-box {
  color: #282828;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
}

.animate {
  margin: auto;
  padding-left: 20px;
  font-size: 12px;
  color: #000;
  display: inline-block;
  white-space: nowrap;
  animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

@keyframes wordsLoop {
  0% {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
</style>
